<template>
<div  v-if="axiosOK" style="margin-bottom:60px">
    <div class="MCdiv1" v-for="index in 2" :key="index">
        <el-row class="MCrow1" type="flex" justify="center">
            <el-col :span="12" class="MCcol1">
                <div class="col1div1" @click="gobuy(0)">
                    <img :src="listpicture[0]" class="MCimg">
                    <div class="spandiv1">
                        <span class="MCspan1">特卖价</span>
                        <span class="MCspan2">￥{{Math.round(topsellinglist[0].price*0.6)}}</span>
                        <span class="MCspan3">￥{{topsellinglist[0].price}}</span>
                        <span class="MCspan4">6.0折</span>
                    </div>
                    <div class="spamdiv2">
                        {{topsellinglist[0].title}}
                    </div>
                    <div class="spamdiv2" style="color: rgb(136, 136, 136);margin-top:3px">
                        {{topsellinglist[0].title.slice(2,20)}}
                    </div>
                    <div class="spandiv1">
                        <span class="MCspan5">hggood专供</span>
                        <span class="MCspan5" style="margin-left:5px">直降6折</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" class="MCcol1">
                <div class="col1div1" @click="gobuy(1)">
                    <img :src="listpicture[1]" class="MCimg">
                    <div class="spandiv1">
                        <span class="MCspan1">特卖价</span>
                        <span class="MCspan2">￥{{Math.round(topsellinglist[1].price*0.6)}}</span>
                        <span class="MCspan3">￥{{topsellinglist[1].price}}</span>
                        <span class="MCspan4">6.0折</span>
                    </div>
                    <div class="spamdiv2">
                        {{topsellinglist[1].title}}
                    </div>
                    <div class="spamdiv2" style="color: rgb(136, 136, 136);margin-top:3px">
                        {{topsellinglist[1].title.slice(2,20)}}
                    </div>
                    <div class="spandiv1">
                        <span class="MCspan5">hggood专供</span>
                        <span class="MCspan5" style="margin-left:5px">直降6折</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="MCrow1" type="flex" justify="center">
            <el-col :span="12" class="MCcol1">
                <div class="col1div1" @click="gobuy(2)">
                    <img :src="listpicture[2]" class="MCimg">
                    <div class="spandiv1">
                        <span class="MCspan1">特卖价</span>
                        <span class="MCspan2">￥{{Math.round(topsellinglist[2].price*0.6)}}</span>
                        <span class="MCspan3">￥{{topsellinglist[2].price}}</span>
                        <span class="MCspan4">6.0折</span>
                    </div>
                    <div class="spamdiv2">
                        {{topsellinglist[2].title}}
                    </div>
                    <div class="spamdiv2" style="color: rgb(136, 136, 136);margin-top:3px">
                        {{topsellinglist[2].title.slice(2,20)}}
                    </div>
                    <div class="spandiv1">
                        <span class="MCspan5">hggood专供</span>
                        <span class="MCspan5" style="margin-left:5px">直降6折</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" class="MCcol1">
                <div class="col1div1" @click="gobuy(3)">
                    <img :src="listpicture[3]" class="MCimg">
                    <div class="spandiv1">
                        <span class="MCspan1">特卖价</span>
                        <span class="MCspan2">￥{{Math.round(topsellinglist[3].price*0.6)}}</span>
                        <span class="MCspan3">￥{{topsellinglist[3].price}}</span>
                        <span class="MCspan4">6.0折</span>
                    </div>
                    <div class="spamdiv2">
                        {{topsellinglist[3].title}}
                    </div>
                    <div class="spamdiv2" style="color: rgb(136, 136, 136);margin-top:3px">
                        {{topsellinglist[3].title.slice(2,20)}}
                    </div>
                    <div class="spandiv1">
                        <span class="MCspan5">hggood专供</span>
                        <span class="MCspan5" style="margin-left:5px">直降6折</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxMCenter',
    data(){
        return{
            topsellinglist:{},
            listpicture:[],
            axiosOK:0,
        }
    },
    mounted(){
        this.$addr.get(`products/hot_list`).then(
            response=>{
                console.log('请求获取热销商品成功了',response)
                this.axiosOK=1
                this.topsellinglist=response.data.data
                for( let i=0; i<response.data.data.length; i++){
                  this.listpicture[i]=require(`../../../assets/${response.data.data[i].image.slice(13)}1_big.jpg`)
                }
            },
            error=>{
                console.log('请求获取热销商品失败了',error.message)
            }
        )
    },
    methods:{
        gobuy(index){
          this.$router.push({
            name:'PxProductDetails',
            params:{id:this.topsellinglist[index].id}})
        },
    },
}
</script>

<style scoped>
.MCdiv1{
    background-color: #f6ccc0;
    /* margin-bottom: 300px; */
}
.MCrow1{
    height: 100%;
    padding-bottom: 5px;
}
.MCcol1{
    background-color: #f6ccc0;
    height: 250px;
}
.col1div1{
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    margin: 5px;
    padding-bottom: 13px;
}
.MCimg{
    width: 100%;
}
.spandiv1{
    margin: 3px;
    padding-right: 5px;
    padding-left: 5px;
}
.MCspan1{
    position: absolute;
    border-radius: 2px;
    padding: 2px;
    font-size: 12px;
    background-color: rgb(255, 57, 106);
    color: white;
}
.MCspan2{
    margin-left: 42px;
    letter-spacing: -1px;
    font-size: 16px;
    font-weight: 650;
}
.MCspan3{
    margin-left: 5px;
    letter-spacing: -1px;
    text-decoration: line-through;
    font-size: 12px;
    color: rgb(136, 136, 136);
}
.MCspan4{
    letter-spacing: -1px;
    margin-left: 5px;
    font-size: 12px;
    color: rgb(136, 136, 136);
}
.spamdiv2{
    margin-right: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 8px;
    font-size: 12px;
}
.MCspan5{
    padding-left: 4px;
    padding-right: 4px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid rgb(255, 57, 106);
    color: rgb(255, 57, 106);
}
</style>